/**
 * 抽象出来的矩形类，可以移动
 * 属性： 宽度，高度，横坐标，纵坐标，横向速度，纵向速度，对应的dom对象
 * xSpeed: 横向速度，单位（像素/秒），正数向右，负数向左
 * ySpeed：纵向速度，单位（像素/秒），正数向下，负数向上
 */
class Rectangle {
  constructor(width, height, left, top, xSpeed, ySpeed, dom) {
    this.width = width;
    this.height = height;
    this.left = left;
    this.top = top;
    this.xSpeed = xSpeed;
    this.ySpeed = ySpeed;
    this.dom = dom;
  }

  // 渲染元素
  render() {
    this.dom.style.width = this.width + "px";
    this.dom.style.height = this.height + "px";
    this.dom.style.left = this.left + "px";
    this.dom.style.top = this.top + "px";

    // 额外渲染
    if (this.otherRender) {
      this.otherRender();
    }
  }

  /**
   * 按照元素的速度和时间，移动元素
   * @param {*} duration 单位：秒
   */
  move(duration) {
    const xDis = this.xSpeed * duration; // 横向移动的距离
    const yDis = this.ySpeed * duration; // 纵向移动的距离
    const newLeft = this.left + xDis; // left新位置
    const newTop = this.top + yDis; // top新位置
    // 移动元素，重新渲染
    this.left = newLeft;
    this.top = newTop;
    // 子类在此期间可能会发生一些事
    if (this.onMove) {
      this.onMove();
    }
    this.render(); // 元素运动重新渲染
  }
}
